﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>周边（圆形区域）检索</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=XQSBZ-MYPKU-EJSVT-4XWSN-QWJXH-2TBDM"></script>
    <script>
        var searchService, map, markers = [];
        var mapCircel;
        var infoWin;
        var pois;
        var init = function () {
            var center = new qq.maps.LatLng(48.6589239484962, 87.04087972640991);
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            mapCircel = new qq.maps.Circle({
                center: new qq.maps.LatLng(48.6589239484962, 87.04087972640991),
                radius: 2000,
                map: map
            });
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });


            var latlngBounds = new qq.maps.LatLngBounds();
            searchService = new qq.maps.SearchService({
                complete: function (results) {
                    pois = results.detail.pois;
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        latlngBounds.extend(poi.latLng);
                        var marker = new qq.maps.Marker({
                            map: map,
                            position: poi.latLng
                        });

                        marker.setTitle(i + 1);

                        markers.push(marker);
                        //标记Marker点击事件
                        qq.maps.event.addListener(marker, 'click', function (e) {
                            if (pois&&pois.length>0) {
                                for (var i = 0; i < pois.length; i++) {
                                    var poi = pois[i];
                                    if (poi.latLng == e.latLng) {
                                        infoWin.open();
                                        var content = '<div style="margin:0;line-height:20px;padding:2px;">'
                                            + '<p>address：' + poi.address + '</p>'
                                            + '<p>category：' + poi.category + '</p>'
                                            + '<p>name：' + poi.name + '</p>'
                                            + '<p>phone：' + poi.phone + '</p>'
                                            + '<p>进度：' + poi.latLng.lng + '</p>'
                                         + '<p>维度：' + poi.latLng.lat + '</p>'
                                     + '</div>';
                                        infoWin.setContent(content);
                                        infoWin.setPosition(e.latLng);
                                    }
                                }
                                
                            }

                        });


                    }
                    map.fitBounds(latlngBounds);
                }
            });
        }

        function searchKeyword() {
            var keyword = document.getElementById("keyword").value;
            var region = new qq.maps.LatLng(48.6589239484962, 87.04087972640991);
            var radius = document.getElementById("radius").value;
            mapCircel.radius = radius;
            searchService.setPageCapacity(5);
            searchService.searchNearBy(keyword, region, radius);
        }
    </script>
</head>
<body onload="init()">
    <div>
        关键字：  <input id="keyword" type="textbox" value="酒店">
        搜索范围 <input id="radius" type="textbox" value="2000" />
        <input type="button" value="search" onclick="searchKeyword()">
    </div>
    <div style="width:1003px;height:500px" id="container"></div>
    <p>输入关键词，点击search查寻，查寻范围这一个圆形区域。</p>
</body>
</html>
